<template>
  <div style="
    background-color: #f6f6f6;
">
    <div class="head-box">
      <div class="profile-box">
        <div class="link">
          <div class="user-avatar-wrap">
              <div class="user-avatar">
                <van-image src="http://s10.mogucdn.com/new1/v1/bdefaultavatar/04.jpg_160x160.jpg" />
              </div>
              <van-image class="user-level"
                src="https://s10.mogucdn.com/mlcdn/c45406/190627_1i49i2a2cj6fll5bh25l07d53l008_72x72.png" />
          </div>
          <div class="user-info">
            <p class="user-name">m_r3dv7358wee5u<!----></p>
            <div class="user-member"
              style="background-image: url(&quot;https://s10.mogucdn.com/mlcdn/c45406/191010_2il1l3i91gkd5c461j93e5ehfcgi5_1404x216.png&quot;);">
            </div>
          </div>
        </div>
      </div>

      <div class="shejiao">
        <van-grid :column-num="5" :border="false" icon-size="12rem" :clickable="true">
          <van-grid-item icon="photo-o" text="我的主页" />
          <van-grid-item icon="photo-o" text="消息" />
          <van-grid-item icon="photo-o" text="收藏" @click="gosc" />
          <van-grid-item icon="photo-o" text="关注" />
        </van-grid>
      </div>

      <div class="shoppingcar">
        <RouterLink to="/shoppingcar" class="car" style="color: black;">购物车</RouterLink>
        <div class="discount">
          <div><span>卡券红包</span><span class="disms">7张活动券</span></div>
          <div><span>补贴保障</span><span class="disms">退货补运费</span></div>
          <div style="border-bottom: none;"><span>我的钱包</span><span class="disms">白付美在这</span></div>
        </div>
      </div>

      <div class="order">
        <div class="allorder">
          <span>我的订单</span>
          <span>全部</span>
        </div>
        <div class="orderstate">
          <van-grid :column-num="5" :border="false" icon-size="20rem" :clickable="true">
            <van-grid-item
      icon="balance-pay"
      text="待付款"
      to="/Pending"
      :dot="hasSelectedItems" />
    <van-grid-item icon="logistics" text="待发货" to="/shipment" :dot="hasSelectedItemsHistory" />
    <van-grid-item icon="free-postage" text="待收货" to="/receipt" :dot="hasSelectedItemsArchive" />
    <van-grid-item icon="smile-comment-o" text="评价" to="evaluated" />
    <van-grid-item icon="refund-o" text="退款售后" />
          </van-grid>
        </div>
      </div>

      <div class="order">
        <div class="allorder">
          <span>我的设置</span>
        </div>
        <div class="orderstate">
          <van-grid :column-num="5" :border="false" icon-size="12rem" :clickable="true">
            <van-grid-item icon="photo-o" text="签到" />
            <van-grid-item icon="photo-o" text="大姨妈" />
            <van-grid-item icon="photo-o" text="客服" />
            <van-grid-item icon="photo-o" text="达人中心" />
          </van-grid>
        </div>
      </div>

      <van-button type="primary" block color="#ff5777" style="width: 350rem;margin:0 auto;border-radius:5rem"
        @click="logout">退出登录</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { createApp } from 'vue';
// import { } from 'vant';
// import { Grid, GridItem } from 'vant';
// const app = createApp();
import { useUserStore } from '@/stores/user.ts';
import { Toast } from 'vant';
import { useRouter } from 'vue-router'
const router = useRouter(); // 引入路由器实例

import { computed } from 'vue';
const hasSelectedItems = computed(() => {
  const itemsString = localStorage.getItem('selectedItems');
  return itemsString ? true : false;
});
const hasSelectedItemsHistory = computed(() => {
  const itemsString = localStorage.getItem('selectedItemsHistory');
  return itemsString ? true : false;
});
const hasSelectedItemsArchive = computed(() => {
  const itemsString = localStorage.getItem('selectedItemsArchive');
  return itemsString ? true : false;
});
// const hasSelectedItems = computed(() => {
//   const itemsString = localStorage.getItem('selectedItems');
//   return itemsString ? true : false;
// });
const userStore = useUserStore();
const gosc = () => {
  router.push({ path: '/shouchang' });
};
const logout = () => {
  userStore.logout();
  Toast('退出成功');
  router.push({ path: '/' });
};

</script>

<style lang="less" scoped>
*,
:after,
:before {
  box-sizing: border-box;
}

.head-box {
  background: url(https://s10.mogucdn.com/mlcdn/c45406/190819_1j85g48lc84kk8deg00f66fk53dlc_750x229.png) 0 0rem no-repeat;
  background-size: 375rem 85rem;
  overflow: hidden;
  margin-bottom: 60rem;

  .profile-box {
    margin: 45rem auto 0;
    height: 130rem;
    width: 350rem;
    border-radius: 12rem;
    background: #fff;
    position: relative;

    .user-avatar-wrap {
      position: absolute;
      left: 50%;
      top: -33rem;
      z-index: 1;
      margin-left: -30rem;

      .user-avatar {
        border: 3rem solid #fff;
        border-radius: 100%;
        overflow: hidden;
        width: 68rem;
        height: 68rem;

        img {
          width: 65rem;
          height: 65rem;
          border-radius: 100%;
          vertical-align: middle;
        }
      }

      .user-level {
        position: absolute;
        right: 3rem;
        bottom: 4rem;
        width: 22rem;
        height: 22rem;
        overflow: hidden;
      }
    }

    .user-info {
      text-align: center;
      padding-top: 15rem;
      width: 100%;

      .user-name {
        font-size: 18rem;
        line-height: 42rem;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #5e5e5e;
      }

      .user-member {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 55rem;
        background-size: 345rem 55rem;
        border-bottom-left-radius: 12rem;
        border-bottom-right-radius: 12rem;
      }
    }
  }

  .shejiao {
    margin: 10rem auto 10rem;
    height: 70rem;
    width: 350rem;
    border-radius: 9rem;
    background: #fff;
    position: relative;
  }

  .shoppingcar {
    margin: 10rem auto 10rem;
    height: 120rem;
    width: 350rem;
    border-radius: 9rem;
    position: relative;
    display: flex;

    .car {
      width: 50%;
      height: 100%;
      background-color: #5e5e5e;
      padding: 10rem;
      background: url(https://s10.mogucdn.com/mlcdn/c45406/190815_3637hh8ac09e50j7f07i7eealck4i_513x360.png) 0px 0px / 170rem 120rem no-repeat;
    }

    .discount {
      width: 50%;
      height: 100%;
      background-color: rgb(255, 255, 255);
      border-radius: 5rem;
      padding: 10rem;

      div {
        height: 33.3%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rem solid #aca8a8b6;
        font-size: 14rem;

        .disms {
          font-size: 12rem;
          color: #999;
        }
      }

    }
  }

  .order {
    margin: 10rem auto 10rem;
    height: 120rem;
    width: 350rem;
    border-radius: 9rem;
    position: relative;
    background: #fff;
    padding: 10rem;

    .allorder {
      border-bottom: 1rem solid #aca8a8b6;
      padding-bottom: 10rem;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
